<script>
    // 自定义页面结构

            /*
                页面顶部标准化导航栏将不显示，可自定义夜间结构

                https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/open-capacity/basic-capacities/custom-page-structure
            */

            /*
                一、能力介绍

                        为保障小程序的良好体验，在原本的标准化导航栏之外提供「自定义页面结构能力」供开发者使用。申请能力通过后，顶部导航栏将不再展示，小程序可以以沉浸式样式展示。

                        自定义导航栏能力设计初中是为了提升小程序的用户体验，申请能力的开发者需详细阅读 《设计指南》 （https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/design/design-specification/visual-specification/custom-nav-practices）

                        按照指南要求完成页面布局配置，保证用户体验。



                            1、页面高度

                                      ①、标准化导航栏下，页面的可绘制高度为导航栏以下区域。

                                                图示：

                                                        https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7244048ea1c849f4a41df67cf9ae3eed~tplv-goo7wpa0wc-quality:q75.awebp

                                      ②、自定义导航栏下，页面的课绘制高度为页面全局。

                                                图示:

                                                       https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c9774a3a8dde4d01b7fcacfbba2fac6e~tplv-goo7wpa0wc-quality:q75.awebp
                                                       
                                      ★、注意:

                                                设计内容需要避开 logo/返回、胶囊(反馈、更多、关闭)几个元素


                            2、交互说明

                                     ①、小程序首页左上角展示品牌 logo ，非首页会展示返回按钮

                                     ②、若用户进入的首个页面为非首页，则左上角展示品牌logo，点击后可快速回到首页。


                            3、相关API 

                                     tt.getCustomButtonBoundingClientRect (https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/api/interface/menu/tt-get-custom-button-bounding-client-rect/)

                                     通过以上API，可获取自定义导航栏平台下发的元素 (如 logo/返回、胶囊[反馈、更多、关闭])的位置信息
                        
            */

            /*
                二、使用场景

                           对页面内容展示具有 "强分为感、沉浸感诉求"时，可申请使用自定义导航栏：

                               图示：

                               https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/81c04abeb997422180a99ef22ec03d38~tplv-goo7wpa0wc-quality:q75.awebp
            */

            /*
                三、接入规范须知

                            自定义导航栏能力设计是为了提升小程序的用户体验，开发者获得能力后需谨慎使用，

                            详细阅读 《设计指南》 (https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/design/design-specification/visual-specification/custom-nav-practices)

                            按照指南要求完成页面布局配置，保证用户体验。


                                1、开发者可依据自身需求在导航栏增加标题、搜索、Tab、定位等内容

                                        图示：

                                                https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/56d57b396084424aaa91efd95132492d~tplv-goo7wpa0wc-quality:q75.awebp

                                2、元素与凭条胶囊需居中对齐，不重叠、不错位、元素间保持一定的安全距离


                                3、导航栏北京可曹勇纯色、渐变色或氛围图进行氛围感营造

                                4、需保证北京图信息清爽，避免背景内容对导航栏框架形成信息遮挡，影响用户提取信息

                                        图示：

                                                https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a706f8273b5b4d009d33097eabba2994~tplv-goo7wpa0wc-quality:q75.awebp
            */

            /*
                 四、准入条件

                            1、信用分达到90分，详情查看《信用分介绍》 (https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/operation/management/credit-points)

                            2、明确告知能力预期的使用场景，且使用场景符合平台要求。

                            3、小程序需要保证有值的用户体验，遵循设计规范。申请时需附上详细 "抖音小程序的设计稿或真实线上截图"
            */

            /*
                 五、接入流程

                            图示：

                                    https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/%E8%8E%B7%E5%8F%96%E6%89%8B%E6%9C%BA%E5%8F%B7-6960153800065967.png


                            1、第一步：  选择申请方式

                                     <1>、登录开发者平台控制台

                                     <2>、在[我的应用] 页面中点击【小程序】，然后再【小程序】页签中点击已创建的应用

                                     <3>、在应用详情页面左侧导航栏选择 【能力】--【互动能力】。在【互动能力】页面点击【容器界面】，在【容器界面】页签的【自定义导航栏】区域点击【申请开通】。

                                                图示：

                                                    https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/56a34a47afdf47119543799bbf6d1122~tplv-goo7wpa0wc-quality:q75.awebp

                            2、第二步： 填写信息提交申请

                                    申请该能力时需要填写【申请原因】、【使用场景】及【场景示例图】

                                    平台根据填写的信息及小程序的内容进行审核。

                                    若开通后，发现开发者在使用过程中滥用此能力，对用户或平台造成负面影响，平台将由权利随时对该功能进行收回，并视情况对违规的小程序进行处罚。

                                        图示：

                                                https://sf1-cdn-tos.douyinstatic.com/obj/microapp/frontend/docs/images/%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84-%E7%94%B3%E8%AF%B7%E4%BF%A1%E6%81%AF-8993166761781459.png

                            3、第三步：平台审核

                                        平台根据填写的应用场景及小程序内容进行审核，审核时间为5个工作日。

                            4、第四步：使用能力

                                        审核通过后即可使用该能力。
            */

            /*
                六、接口列表

                                  API名称                           API类型               API描述

                              ①、申请能力                           OpenAPI                通过该接口申请页面结构自定义能力
                                                                                  https://partner.open-douyin.com/docs/resource/zh-CN/mini-app/develop/server/page-layout-custom/apply-capacity

                              ②、查询能力申请状态                   OpenAPI                查询页面结构自定义能力申请状态
                                                                                  https://partner.open-douyin.com/docs/resource/zh-CN/mini-app/develop/server/page-layout-custom/query-capacity-status

                              ③、管理页面结构自定义能力(服务商调用)   OpenAPI                服务商可通过该系列接口申请能力并查询能力申请状态
                                                                                  https://partner.open-douyin.com/docs/resource/zh-CN/thirdparty/API/smallprogram/auth-app-manage/operation/microapp/page-layout-custom-capacity


            */
</script>